So far the balloon should only be able to reach max 70 font before it bursts. I need to turn the balloon into "💥". The event listener needs to be removed when the balloon bursts.
let para = document.querySelector('p');
para.style.fontSize = '24px';
window.addEventListener("keydown", e => {
var sizeAsInteger = parseInt(para.style.fontSize, 10);
if (e.key == "ArrowUp") {
sizeAsInteger += 10;
} else {
sizeAsInteger -= 10;
}
para.style.fontSize = sizeAsInteger + 'px';
});p {
font-size: 50px;
}<body>
<p>🎈</p>
</body>Is this what you want?
let para = document.querySelector("p");
para.style.fontSize = "24px";
const increaseSize = e => {
var sizeAsInteger = parseInt(para.style.fontSize, 10);
if (sizeAsInteger >= 70) {
window.removeEventListener("keydown", increaseSize);
return (para.innerHTML = "💥");
}
if (e.key == "ArrowUp") {
sizeAsInteger += 10;
} else {
sizeAsInteger -= 10;
}
para.style.fontSize = sizeAsInteger + "px";
};
window.addEventListener("keydown", increaseSize);p {
font-size: 50px;
}<p>🎈</p>